<template>
    <el-dialog title="添加资源使用表" :visible.sync="isShow" width="550px" :close-on-click-modal="false" class="about_dialog"
               @close="cancel" v-dialogDrag :lock-scroll="false">
        <div class="el-dialog-div">
        <el-form size="small" label-width="100px" :model="form" ref="form" :rules="rules">
            <el-form-item label="合同ID" prop="contractId">
                <PartSelect v-model="form.contractId" class="partSelect" @getData="getContract"></PartSelect>
                <!-- <el-input placeholder="请输入" v-model="form.contractId" style=";"></el-input> -->
            </el-form-item>
            <el-form-item label="分区名" prop="partitionName">
                <el-input placeholder="请输入" v-model="form.partitionName" style=";"></el-input>
                <el-popover placement="right" width="150px" trigger="hover">
                    <div>
                        <p>必须为英文字符</p>
                    </div>
                    <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
            </el-form-item>
            <el-form-item label="剩余CPU" prop="surplusCpu">
                <el-input placeholder="请输入" v-model="form.surplusCpu" >
                </el-input>
            </el-form-item>
            <el-form-item label="剩余节点" prop="surplusNode">
                <el-input placeholder="请输入" v-model="form.surplusNode" style=";"></el-input>
            </el-form-item>
            <el-form-item label="剩余存储" prop="surplusStorage">
                <el-input placeholder="请输入" v-model="form.surplusStorage" style=";"></el-input>
            </el-form-item>
            <el-form-item label="使用CPU" prop="useCpu">
                <el-input placeholder="请输入" v-model="form.useCpu" style=";"></el-input>
            </el-form-item>
    
            <el-form-item label="使用节点" prop="useNode">
                <el-input placeholder="请输入" v-model="form.useNode" style=";"></el-input>
            </el-form-item>
            <el-form-item label="使用存储" prop="useStorage">
                <el-input placeholder="请输入" v-model="form.useStorage" style=";">
                </el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
                <el-input placeholder="请输入" v-model="form.userName" style=";"></el-input>
                <el-popover placement="right" width="150px" trigger="hover">
                    <div>
                        <p>必须为英文字符</p>
                    </div>
                    <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
            </el-form-item>
            <el-form-item label="用户类型" prop="userType">
                <el-select v-model="form.userType">
                    <el-option value="包节点" label="包节点">包节点</el-option>
                    <el-option value="包核时" label="包核时">包核时</el-option>
                </el-select>
            </el-form-item>
        </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button class="font12" @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="confirm" size="small">确 定
            </el-button>
        </span>
    </el-dialog>
   
</template>
<script>
import PartSelect from './PartSelect.vue';
// import { createOffer } from '@/service/zstack/calcSpec';

export default {
  components: { PartSelect },
    data() {
        return {
            isShow: false,
            form: {
                contractId: '',
                partitionName: '',
                surplusCpu: '',
                surplusNode: '',
                surplusStorage: '',
                useCpu: '',
                useNode: '',
                useStorage: '',
                userName: '',
                userType: ''
            },
            rules: {
                partitionName: [{ required: true, message: '请输入分区名', trigger: 'blur' }],
                surplusCpu: [{ required: true, message: '请输入剩余CPU', trigger: 'blur' }],
                surplusNode: [{ required: true, message: '请输入剩余节点', trigger: 'blur' }],
                surplusStorage: [{ required: true, message: '请输入剩余存储', trigger: 'blur' }],
                useCpu: [{ required: true, message: '请输入CPU', trigger: 'blur' }],
                useNode: [{ required: true, message: '请输入节点', trigger: 'blur' }],
                useStorage: [{ required: true, message: '请输入存储', trigger: 'blur' }],
                userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                userType: [{ required: true, message: '请输入用户类型', trigger: 'blur' }],
            }
        };
    },
    computed: {},
    watch: {
        isShow(val) {
            if (!val) {
                this.$refs['form'].resetFields();
            }
        }
    },
    methods: {
        show() {
            this.form = {
                contractId: '',
                partitionName: '',
                surplusCpu: '',
                surplusNode: '',
                surplusStorage: '',
                useCpu: '',
                useNode: '',
                useStorage: '',
                userName: '',
                userType: '包节点'
            };
            this.isShow = true;
        },
        hide() {
            this.isShow = false;
        },
        cancel() {
            this.hide();
        },
        getContract(data) {
            this.form.contractId = data
        },
        confirm() {
            // console.log('confirm',this.form);
            this.$refs.form.validate(async valid => {
					if (valid) {
						const { data: res } = await this.$http.post('hpc', this.form);
                            console.log(res);
							if (res.code === 200) {
								//隐藏对话框
								this.isShow = false
								this.$emit("fetchData")
								this.$message.success("添加成功")
							} else {
								this.$message.error("操作失败")
							}
					}
				})
        }
    }
};
</script>
<style lang="less" scoped>
.el-dialog__body{
    padding: 0px;
    // overflow-y: auto;
}

.el-dialog-div{
    height: 50vh;
    overflow: auto;
    &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    // &::-webkit-scrollbar-thumb { 
    // border-radius: 5px;
    // background-color:  #d6d5d5;
    // }  
    // &::-webkit-scrollbar-track { 
    // box-shadow: inset 0 0 5px #fff;
    // background: rgb(209, 55, 55);
    // border-radius: 5px;
    // }
}
}

.el-input{
    width: 90%;
}

.el-select{
    width: 90%;
}

.el-icon-warning-outline{
    margin-left: 10px;
    font-size: 20px;
}

.part-select{
    width: 90%;
}

.partSelect{
    width: 90%;
}
</style>>